<template>
  <div id="login">
    <div class="login"></div>
    <van-field v-model="mobile" name="手机号码" label="手机号码" placeholder="手机号码" />

    <van-field v-model="smscode" type="text" name="验证码" label="验证码" placeholder="验证码">
      <template #button>
        <van-button size="small" type="primary" @click="getsmsCode" v-if="!timebool">发送验证码</van-button>
        <van-button size="small" type="primary" v-if="timebool" style="color:#ccc;">发送验证码{{time}}</van-button>
      </template>
    </van-field>
    <div class="login1">
      <div>*未注册的手机号将自动注册</div>
      <div @click="$router.push('login')">使用密码登录</div>
    </div>

    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit" @click="goLogin">登录</van-button>
    </div>

  </div>
</template>

<script>
// 引入方法
import { smsverification, actionsLogin, verificationLogin } from "../api/api"
// 按需引入“vant”
import { Form, Field, Button, NavBar, Toast } from "vant";
export default {
  // 按需引入“vant”
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
  },

  data () {
    return {
      mobile: "",
      sms_type: "login",
      smscode: "",

      time: 60,
      timebool: false,
      type: "",
      active: "",
      showOther: false,

    }
  },
  methods: {
    //  点击 发送验证码
    getsmsCode () {
      var obj = {
        "mobile": this.mobile,  //手机号码
        "sms_type": this.sms_type,//登陆类型
      }
      //   console.log(obj);
      smsverification(obj).then(res => {
        console.log(res);
        //   this.timebool = true;
        //   this.time = 60;
        //   var timer = setTimeout(() => {
        //     this.time--;
        //     if (this.time <= 0) {
        //       this.timebool = false
        //       // clearInterval(timer)
        //     }
        //   }, 1000)
      })
    },


    goLogin () {
      var obj = {
        mobile: this.mobile,
        sms_code: this.smscode,
        type: 2,
        client: 1,
      };
      verificationLogin(obj).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          localStorage.setItem(
            "mobile", this, mobile,
            "sms_code", this.smscode,
            "adminToken", res.data.data.remember_token,
            "user_id", res.data.data.id,
          )
          //   判断是否新用户  1位新用户  2是老用户
          if (res.data.data.is_new == 1) {
            Toast.fail(res.data.msg)
            this.$router.push("/mysetpass")
          } else {
            this.$router.push("/My")
          }
        }
      })
    },


    submit () {

    },
    // onSubmit () {
    //   let obj = {
    //     mobile: this.username,
    //     password: this.password,
    //     type: 1
    //   }
    //   login(obj).then(res => {
    //     console.log(res);
    //     if (res.status == 1) {
    //       localStorage.setItem("token", res.data.data.remember_token)
    //       localStorage.setItem("user_id", res.data.data.id)
    //      
    //       this.$router.push("/My")
    //     } else if (res.code == 201) {
    //       Toast.fail(res.msg)
    //     }
    //   }).catch(err => {
    //     console.log(err);
    //   })
    // }
  },
  mounted () {

  },

}
</script>

<style>
#login {
  display: flex;
  flex-direction: column;
}
.login {
  width: 100%;
  height: 3.5rem;
  background: url("/images/detail.png") no-repeat center;
  background-size: 100%;
}
.login1 {
  padding: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.login2 {
  text-align: center;
}
.login3 {
  display: flex;
  justify-content: space-around;
  font-size: 0.4rem;
}
.login3 img {
  width: 15%;
  height: 100%;
}
</style>